import React from 'react'
import { Button, Toast, TextareaItem } from 'antd-mobile'
import { APPID } from '../../constants'
import getQuery from '../../helpers/getQuery'
import { createForm } from 'rc-form';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { actions as listActionCraetors } from '../../redux/modules/list'
import config from '../../../config';
import './detail.less';

const slogens = ['准时到达', '穿着专业', '训练有素', '态度良好', '运送迅速', '货物完好', '还柜迅速']
const images = [{
  icon: 'chaping',
  title: '非常差',
  score: -1
}, {
  icon: 'zhongping',
  title: '一般',
  score: 1
}, {
  icon: 'haoping',
  title: '超赞',
  score: 2
}]

class Detail extends React.PureComponent {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  state = {
    activeImg: 0,
    activeLogen: [],
    content: '',

    loading: false
  }

  componentDidMount() {
    this.fetchDetail()
  }

  render() {
    const { getFieldProps } = this.props.form;
    
    return <section className="inner-page">
      <div className="comment-image">
        {
          images.map((item, index) => <div key={index} className={`item ${this.state.activeImg == index ? 'active' : ''}`} onClick={this.handleImage.bind(this, index)}>
            <i className={`iconfont icon-${item.icon}`} />
            <span>{item.title}</span>
          </div>)
        }
      </div>

      <div className="slogen">
        {
          slogens.map((item, index) => <div key={index} className={`item ${this.state.activeLogen.indexOf(index) > -1 ? 'active' : ''}`} onClick={this.handleLogen.bind(this, index)}>{item}</div>)
        }
      </div>

      <div>
        <TextareaItem
          title=""
          placeholder=""
          autoHeight
          value={this.state.content}
          onBlur={this.handleBlur.bind(this)}
          onChange={this.handleInput.bind(this, 'content')}
        />
      </div>
      
      <Button type="primary" disabled={this.state.loading} loading={this.state.loading} onClick={this.handleSubmit.bind(this)}>提交</Button>
    </section>
  }

  handleBlur() {
    window.scroll(0,0); //让页面归位
  }

  handleInput(field, value) {
    this.setState({
      [field]: value
    })
  }

  handleImage(index) {
    this.setState({
      activeImg: index
    })
  }

  handleLogen(index, e) {
    e.stopPropagation();
    let idx = this.state.activeLogen.indexOf(index)
    if (idx > -1) {
      this.state.activeLogen.splice(idx, 1)
    } else {
      this.state.activeLogen.push(index)
    }

    this.setState({
      activeLogen: this.state.activeLogen.slice()
    })

  }

  handleSubmit() {
    let content = []
    this.state.activeLogen.forEach(item => {
      content.push(slogens[item])
    })

    this.setState({
      loading: true
    })

    this.props.actions.saveComment({
      "OrderNo": this.props.params.id,
      "SatisfactionLevel": images[this.state.activeImg].score,
      "ContentDesc": `${content.join(" ")}  ${this.state.content.replace(/\s+/g, "")}`
    }, json => {
      this.setState({
        loading: false
      })
      if (json.IsSuccess) {
        Toast.success('提交成功',1)
        setTimeout(() => {
          this.context.router.push('/wx/list')
        }, 1000);
      } else {
        Toast.fail(json.Msg || '', 1)
      }
    })
  }

  fetchDetail() {
    Toast.loading('数据请求中...', 100);
    this.props.actions.fetchComment({orderNo: this.props.params.id} , json => {
      Toast.hide()
      if (json.IsSuccess && json.Data) {
        let arr = []
        let ContentDesc = json.Data.ContentDesc
        if (ContentDesc.indexOf('来自业务端:') > -1) {
          ContentDesc = ContentDesc.replace('来自业务端:', '')
        }

        let contentArr = ContentDesc.split(' ')
        let content = contentArr.splice(contentArr.length - 1, 1)
        let active = images.findIndex(item => item.score == json.Data.SatisfactionLevel)
        // 找到 
        contentArr.forEach(item => {
          let idx = slogens.findIndex(s => s == item)
          if (idx > -1) {
            arr.push(idx)
          }
        })
        

        this.setState({
          activeImg: active > -1 ? active : 0,
          activeLogen: arr,
          content: content[0]
        })
      }
    })
  }
}

const stateToProps = state => ({
  ...state.list
})

const dispatchToProps = dispatch => ({
  actions: bindActionCreators(listActionCraetors, dispatch)
})

export default connect(stateToProps, dispatchToProps)(createForm()(Detail));
